import React, { FC, useEffect, useRef, useState } from 'react';
import "./index.scss"
import Img from "@/assets/503.png"
import { SpanType } from '../../types';
import { useCommonFunc, useTimeDown } from '../../hooks/useCommon';
import { ProgressCircle } from 'antd-mobile';
import { useCountDown } from 'ahooks'

// FC FunctionComponent 纯函数组件 
// 定义这个组件接受的参数
const BadService:FC<{
    msg?:string,
    id?:number,
}> = () => {
    let bgstar:any = useRef()
    let [spanList,setSpanList] = useState<Array<SpanType>>([])
    let { gotopage } = useCommonFunc()

    // 封装倒计时
    // const [timeleft,start] = useTimeDown(5,()=>{
    //      gotopage('/app')
    // })

    // 页面雪花
    const getSpanListInit = () => {
        let width = bgstar.current.clientWidth;
        let height = bgstar.current.clientHeight;
        console.log(width,height);
        
        for(var i=0; i<520; i++){
            let left = width*Math.random()
            let top = height*Math.random()
            let scaler = Math.random()*1.5
            let rate = Math.random()*2.5
            // let bgcolor = '#fff'

            let r = Math.floor(Math.random() * 255 )
            let g = Math.floor(Math.random() * 255 )
            let b = Math.floor(Math.random() * 255 )
            let a = Math.random() 
            // let bgcolor = '#fff'
            let bgcolor = `rgba(${r},${g},${b},${a})`

            spanList.push({
                left:left+"px",
                top:top+"px",
                animationDelay:rate+"s",
                transform:`scaler(${scaler})`,
                background:bgcolor,
            })
        }
        setSpanList([...spanList])
    }


    const[
      leftTime,
      start
    ] = useTimeDown(5,()=>{

    })

    const [percent] = useCountDown({
      leftTime:5*1000, //5秒完成,
      interval:200,    //进度条
      onEnd:()=>{
        gotopage('/app')
      }
    })


    useEffect(()=>{
        // start()
        getSpanListInit()
    },[])


  return (
    <div className='errorpage' ref={bgstar}>
      {/* <div className="down" onClick={()=>gotopage('/app')}>剩余 {timeleft} S</div> */}
        <img src={Img} alt="" className='myimg'/>

        <div className="dao" onClick={()=>gotopage('/app')}>
            <ProgressCircle  percent={Math.floor(percent/50)} style={{ '--size': '40px','--fill-color': '#00B578' }}>
            <span className='ft14 white'>{Math.floor(percent/50)}%</span>
            </ProgressCircle>
        </div>
        {
                spanList.map((item,index)=>{
                    return(
                        <span style={item} key={index} className='spandot'></span>
                    )
                })
            }
    </div>
  )
}

export default BadService